<template>
  <div>

    <button :disabled="flag" class="toTop" @click="toTopF" v-show="top">
<!--      停止-->
      <img id="plane" src="../assets/rocket.png" alt="" v-show="flag">
      <img src="../assets/rocket.png" alt="" v-show="!flag">
    </button>
  </div>

</template>

<script>

export default {
name: "ToTop",
  data(){
  return{
    value:0,
    top:false,
    flag:false,
    inAnimation:false,
  }
  },
  methods:{

    toTopF (){
      this.inAnimation = !this.inAnimation
      this.flag = !this.flag
      let timer = setInterval(()=>{
        document.documentElement.scrollTop -= 20;
        if (document.documentElement.scrollTop <= 0){
          clearInterval(timer)
          this.flag = !this.flag
        }
      },5)
    }
  },
  mounted(){
    window.addEventListener("scroll",()=>{// 滚动事件
      let html =document.documentElement
      if (html.scrollTop>=100) {//当滚动高度大于等于100返回顶部出现
        this.top=true
      } else {
        this.top=false
      }
    })
  },
}
</script>

<style scoped lang="less">
.toTop{
  position: fixed;
  bottom: 100px;
  right: 25px;
  width: 40px;
  height: 40px;
  text-align: center;
  background-color: transparent;
  border-radius: 50%;
  padding: 5px;
  box-sizing: border-box;
  border: 0;
}
img{
  width: 30px;
  height: 30px;
}
#plane{
  animation: rotate 3s linear infinite;
  transform-origin:50% 50%;
}
// 动画
@keyframes rotate {
  0%{
      transform: translateY(0);
    }
  100%{
    transform: translateY(-400px);
  }
}
</style>